<!DOCTYPE html>
<html>

<head>
    <link href="../amaran.css" rel="stylesheet"></link>
    <link href="../button.css" rel="stylesheet"></link>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../stomp.js"></script>
    <script type="text/javascript" src="../sockjs.js"></script>
    <script type="text/javascript" src="../amaran.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<style type="text/css">
	body{
		text-align:center


	}
	#main{
		margin:0 auto;
		position:absolute;
		top:50px;
		left:350px;
		width:600px
		height:100px;
	}
	#zone{
		margin:0 auto;
		position:absolute;
		top:100px;
		left:350px;
		width:600px;
		height:600px;


	}

	#mad{
		margin:0 auto;
		position:absolute;
		top:0px;
		left:0px
	}


</style>
<audio id='audio1' src='../1.mp3'/>
<audio id='audio2' src='../2.mp3'/>
<audio id='audio3' src='../3.mp3'/>
<audio id='audio4' src='../4.mp3'/>
<audio id='audio5' src='../5.mp3'/>
<audio id='audio6' src='../6.mp3'/>
<audio id='audio7' src='../7.mp3'/>
<audio id='audio8' src='../notify.mp3'/>
<script>



    var stompClient = null;
    var userId ;


    $(function() {
        startServer();

        $('#join').on('click',joinGame);
        $('#ready').on('click',setReady).hide();
        $('#restart').hide();
        $('#mad').hide();
	    $('#mad').on('click',madlyClick);

		
    })

    var random = function(items){
    return items[Math.floor(Math.random()*items.length)];
	}
	var inEffects = ['slideRight','slideLeft','slideBottom','slideTop'];
	var positions = ['top right','bottom right','bottom left'];
	var skills =["空手劈", "二连踢", "飞踢", "回旋踢", "地狱翻滚", "踢倒", "双倍奉还", "地球上投", "飞膝踢", "三连踢", "起死回生", "音速拳", "爆裂拳", "借力摔", "十字劈", "碎岩", "真气拳", "蛮力", "报复", "劈瓦", "猛推", "冲天拳", "唤醒巴掌", "臂锤", "近身战", "发劲", "吸取拳", "山岚摔", "下盘踢", "巴投", "圣剑", "飞身重压", "增强拳", "摩诃指", "大金刚掌", "韦陀杵", "袖里乾坤", "龙爪手", "须弥山掌", "千手如来掌", "金刚般若掌", "神掌八打", "一拍两散", "擒龙功", "快掌", "醉拳", "如影随形腿", "白蛇吐芯", "海底捞月", "二龙戏珠", "青龙摆尾", "饿虎扑食", "白鹤亮翅", "美女照镜", "渔郎问津", "四面埋伏", "童子拜佛", "如来神掌", "凌波微步", "猴子摘桃", "移花接木", "斗转星移", "六脉神剑", "降龙十八掌", "见龙在田", "飞龙在天", "亢龙有悔", "利涉大川", "鱼跃于渊", "羝羊触潘", "损则有孚", "屡霜冰至", "潜龙勿用", "时乘六龙", "神龙摆尾", "或跃在渊", "突如其来", "双龙取水", "鸿渐于陆", "震惊百里", "龙战于野", "密云不雨", "羽加迪姆勒维奥萨", "阿拉霍洞开开门咒", "腿立僵停死锁腿咒", "统统石化石化咒", "乌龙出洞", "一忘皆空遗忘咒", "咒立停", "急急现形现形咒", "咧嘴呼啦啦", "塔朗泰拉舞", "除你武器缴械咒", "滑稽滑稽", "我庄严宣誓我没干好事", "恶作剧完毕", "防雨防湿", "快快复苏", "呼神护卫守护神咒", "瓦迪瓦西发射咒", "消隐无踪", "速速变大", "速速缩小", "荧光闪烁", "给我指路指路咒", "阿瓦达索命索命咒", "魂魄出窍夺魂咒", "障碍重重障碍咒", "昏昏倒地", "门牙塞大棒", "火烤热辣辣", "词典飞来", "火弩箭飞来", "飞来飞去", "钻心剜骨钻心咒", "兰花盛开", "飞鸟群群", "奖杯飞来", "声音洪亮", "悄声细语", "尸骨再现", "闪回前咒", "火焰熊熊", "力松劲泄", "修复如初", "四分五裂", "清理一新", "箱子移动", "青蛙飞来", "无声无息", "试卷飞来", "魔杖飞来", "快快禁锢", "大脑飞来", "盔甲护身", "预言球飞来", "摄神取念", "门托斯", "收拾", "天马流星拳", "天马彗星拳", "天马回旋碎击拳", "钻石星尘拳", "金钢火焰旋风拳", "曙光女神之宽恕", "水结晶之环", "庐山升龙霸", "庐山龙飞翔", "庐山亢龙霸", "庐山百龙霸", "星云锁链", "星云气流", "星云风暴"];
	var hundreds = ['100px','200px','300px','400px','500px'];
    var audioClips = [audio1,audio2,audio3,audio4,audio5,audio6,audio7];
    function red(message){
        var  clip = random(audioClips);
        clip.play();
    	 $.amaran({
	        'theme'     :'colorful',
	        'content'   :{
	           bgcolor:'#C43C3C',
	           color:'#fff',
	           message:message
	        },
	        'position'  :random(positions),
	        'outEffect' :random(inEffects)
	    });

    }


    function green(message){
    var  clip = random(audioClips);
    clip.play();
    	 $.amaran({
	        'theme'     :'colorful',
	        'content'   :{
	           bgcolor:'#27ae60',
	           color:'#fff',
	           message:message
	        },
	        'position'  :random(positions),
	        'outEffect' :random(inEffects)
	    });

    }


    function black(message,delay){
        audio8.play();
        if(!delay){
            delay = 3000;
        }
    	 $.amaran({
	        'theme'     :'colorful',
	        'content'   :{
	           bgcolor:'#111111',
	           color:'#fff',
	           message:message
	        },
	        delay:delay,
	        'position'  :'top left',
	        'outEffect' :'slideBottom'
	    });

    }




    function startServer() {
        var url = 'webServer'
        var socket = new SockJS(url);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {

            //广播方式实现点对点回调
            stompClient.subscribe('/topic/game', function (message) {
                showChat(message.body);
            });

            stompClient.subscribe('/user/topic/game', function (message) {
                showChat(message.body);
            });

        });
        //强制关闭浏览器断开连接
        window.onbeforeunload = function() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
        }
    }

    function joinGame(){
      $("#join").hide();
      stompClient.send("/msg/game", {}, JSON.stringify({
          'name' : encodeURIComponent('join')
      }));
    }

   function setReady(){
      $("#ready").hide();
      stompClient.send("/msg/game", {}, JSON.stringify({
          'name' : encodeURIComponent('ready')
      }));
    }

    function madlyClick(){
    	$(this).css("top",random(hundreds));
    	$(this).css("left",random(hundreds));

      stompClient.send("/msg/game", {}, JSON.stringify({
          'name' : encodeURIComponent('click')
      }));
    }

    function showChat(message) {
        var json = $.parseJSON(message);
        if(json.type =="yourId"){
            userId = json.playerId;
        }else if(json.type == "increment"){
            if(userId == json.playerId){
                green(random(skills));
            }else{
                red(random(skills));
            }
        }else if(json.type == "result"){
            $('#restart').show();
            $('#mad').hide();
            if(userId == json.playerId){
                black(json.msg+"你",100000);
            }else{
                black(json.msg+"对方玩家",100000);
            }
        }else if(json.type == "ready"){
            $("#ready").show();
            black(json.msg);
        }else if(json.type=="GO"){
            $("#mad").show();
            black(json.msg);
        }else{
            black(json.msg);
        }


    }
</script>
<body>
<div id="main">
    <button id="join" class="btn-4">加入游戏</button>
	<button id="ready"  class="btn-1">准备</button>
    <button  id="restart"  class="btn-2" onclick="location.reload()">重新开始</button>
</div>
<div id="zone">
    <button id="mad" class="btn-8">出招</button>
</div>

</body>
</html>
